/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {StyleSheet, Text, View, Dimensions, Image, TouchableOpacity, PixelRatio, TouchableHighlight,ListView} from 'react-native';

import Common from '../../component/common';

import ToolbarComponent from '../../component/ToolbarComponent';

import LoadError from '../../component/loadError';

import Loading from '../../component/loading';

import stylesm from '../../style/media';

import AnalysisList from './analysisList';

const totalWidth = Dimensions.get('window').width;

export default class MoreAnalysis extends Component {
  constructor(props) {
    super(props);
    var dsanalysis = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      loading: false,
      isMore: true,
      analysisMediaDataSource: dsanalysis,
      hoursPos: true,
      weekPos: false,
      allPos: false,
      hoursNeg: false,
      weekNeg: false,
      allNeg: false,
      posNeg: false,
      list: [],
    };
    this.analysismedia = [];
    this.analysismediamore = [];
    this.analysismediatotal = [];
    this.hoursPosList = this.props.name.negPosNewsList;
    this.weekPosList = [];
    this.hoursNegList = [];
    this.weekNegList = [];
    this.allNegList = [];
  }
  componentWillMount(){
    if(this.props.name){
      this.switchTab(this.props.name);
    }
  }
  fetchData = (type, callBack) => {
    let formData = new FormData();
    formData.append("id", this.props.did.programId);
    formData.append("type", type);
    Common.fetchData("post", "/billboard/senDetailExtra", formData, (responseData) => {
      // alert("123");
      callBack(responseData);
    },() => {
      // alert("00");
      this.setState({
        loading: false,
        success: false,
        errorMessage: "请求失败",
      });
    },() => {
      this.setState({
        loading: false,
        success: false,
        errorMessage: "网络错误",
      });
    });
  }
  switchTab = (tabName) => {
    this.setState({
      loading: true,
      success: false,
      errorMessage: '',
    });
    switch (tabName){
        case "hoursPos":
          this.setState({
            hoursPos: true,
            weekPos: false,
            allPos: false,
            hoursNeg: false,
            weekNeg: false,
            allNeg: false,
            posNeg: true,
            currentStatus: "hoursPos",
          });
          this.fetchData(1,(responseData) => {
            this.hoursPosList = responseData.entity.resultList;
            this.setState({
              loading: false,
              success: true,
              list: this.hoursPosList,
            })
          });
          break;
        case "weekPos":
          this.setState({
            hoursPos: false,
            weekPos: true,
            allPos: false,
            hoursNeg: false,
            weekNeg: false,
            allNeg: false,
            posNeg: true,
            currentStatus: "weekPos",
          });
          this.fetchData(7,(responseData) => {
            this.weekPosList = responseData.entity.resultList;
            this.setState({
              loading: false,
              success: true,
              list: this.weekPosList,
            })
          });
          break;
        case "allPos":
          this.setState({
            hoursPos: false,
            weekPos: false,
            allPos: true,
            hoursNeg: false,
            weekNeg: false,
            allNeg: false,
            posNeg: true,
            currentStatus: "allPos",
          });
          this.fetchData(9,(responseData) => {
            this.allPosList = responseData.entity.resultList;
            this.setState({
              loading: false,
              success: true,
              list: this.allPosList,
            })
          });
          break;
        case "hoursNeg":
          this.setState({
            hoursPos: false,
            weekPos: false,
            allPos: false,
            hoursNeg: true,
            weekNeg: false,
            allNeg: false,
            posNeg: false,
            currentStatus: "hoursNeg",
          });
          this.fetchData(-1,(responseData) => {
            this.hoursNegList = responseData.entity.resultList;
            this.setState({
              loading: false,
              success: true,
              list: this.hoursNegList,
            })
          });
          break;
        case "weekNeg":
          this.setState({
            hoursPos: false,
            weekPos: false,
            allPos: false,
            hoursNeg: false,
            weekNeg: true,
            allNeg: false,
            posNeg: false,
            currentStatus: "weekNeg",
          });
          this.fetchData(-7,(responseData) => {
            this.weekNegList = responseData.entity.resultList;
            this.setState({
              loading: false,
              success: true,
              list: this.weekNegList,
            })
          });
          break;
        case "allNeg":
          this.setState({
            hoursPos: false,
            weekPos: false,
            allPos: false,
            hoursNeg: false,
            weekNeg: false,
            allNeg: true,
            posNeg: false,
            currentStatus: "allNeg",
          });
          this.fetchData(-9,(responseData) => {
            this.allNegList = responseData.entity.resultList;
            this.setState({
              loading: false,
              success: true,
              list: this.allNegList,
            })
          });
          break;
      }
  };
  render() {
    var data = this.props.did;
    var sentimentAnalysisCount = data.posTotalReportCount/(data.posTotalReportCount + data.negTotalReportCount);
    if(data.posTotalReportCount || data.negTotalReportCount){
      return (
        <View style={{flex: 1, backgroundColor: '#f6f6f6'}}>
        <ToolbarComponent
          leftItem={{
            title: 'Back',
            layout: 'icon',
            icon: require("../../images/back.png"),
            onPress: () => {
               Common.onBack(this);
            },
          }}
          // extraItem={{
          //   title: 'Collection',
          //   layout: 'icon',
          //   icon: collectionIcon,
          //   onPress: () => {
          //     if(this.state.isCollection){
          //       Common.deleteCollection({id: this.props.did, type: this.state.source.type},() => {
          //         this.setState({isCollection: false});
          //       });
          //     }else{
          //       Common.addCollection({id: this.props.did, type: this.state.source.type},() => {
          //         this.setState({isCollection: true});
          //       });
          //     }
          //   },
          // }}
          // rightItem={{
          //   title: 'Share',
          //   layout: 'icon',
          //   icon: require("../../images/share/share.png"),
          //   onPress: () => {
          //     if(this.refs.share){
          //       this.refs.share.show(this.location, this.state.source.id);
          //     }
          //   },
          // }}
        >
          <View style={styles.toolbarV}>
            <Text style={styles.toolbarT} numberOfLines={1}>舆情分析</Text>
          </View>
        </ToolbarComponent>
        <View style={styles.analysis}>
          <View style={[stylesm.reportTitle,{paddingHorizontal: 0,backgroundColor: '#fffdfe'}]}>
            <TouchableOpacity onPress={() => {this.switchTab("hoursPos")}} style={[stylesm.reportTitleW,this.state.hoursPos?styles.borderStyle:null]}>
              <Text style={stylesm.reportTitleN}>{Common.toTransformation(data.posYesterdayReportCount).value}<Text style={stylesm.unitF}>{Common.toTransformation(data.posYesterdayReportCount).unit}</Text></Text>
              <View style={stylesm.reportTitleL}>
                <Text style={styles.reportTitleText}>48小时</Text>
                <Text style={styles.reportTitleText}>正面报道量</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => {this.switchTab("weekPos")}} style={[stylesm.reportTitleW,this.state.weekPos?styles.borderStyle:null]}>
              <Text style={stylesm.reportTitleN}>{Common.toTransformation(data.posOther1ReportCount).value}<Text style={stylesm.unitF}>{Common.toTransformation(data.posOther1ReportCount).unit}</Text></Text>
              <View style={stylesm.reportTitleL}>
                <Text style={styles.reportTitleText}>七日正面</Text>
                <Text style={styles.reportTitleText}>报道量</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => {this.switchTab("allPos")}} style={[stylesm.reportTitleW,this.state.allPos?styles.borderStyle:null]}>
              <Text style={stylesm.reportTitleN}>{Common.toTransformation(data.posTotalReportCount).value}<Text style={stylesm.unitF}>{Common.toTransformation(data.posTotalReportCount).unit}</Text></Text>
              <View style={stylesm.reportTitleL}>
                <Text style={styles.reportTitleText}>总正面</Text>
                <Text style={styles.reportTitleText}>报道量</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => {this.switchTab("hoursNeg")}} style={[stylesm.reportTitleW,this.state.hoursNeg?styles.borderStyle:null]}>
              <Text style={[stylesm.reportTitleN, styles.reportTitleLC]}>{Common.toTransformation(data.negYesterdayReportCount).value}<Text style={stylesm.unitF}>{Common.toTransformation(data.negYesterdayReportCount).unit}</Text></Text>
              <View style={stylesm.reportTitleL}>
                <Text style={styles.reportTitleText}>48小时</Text>
                <Text style={styles.reportTitleText}>负面报道量</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => {this.switchTab("weekNeg")}} style={[stylesm.reportTitleW,this.state.weekNeg?styles.borderStyle:null]}>
              <Text style={[stylesm.reportTitleN, styles.reportTitleLC]}>{Common.toTransformation(data.negOther1ReportCount).value}<Text style={stylesm.unitF}>{Common.toTransformation(data.negOther1ReportCount).unit}</Text></Text>
              <View style={stylesm.reportTitleL}>
                <Text style={styles.reportTitleText}>七日负面</Text>
                <Text style={styles.reportTitleText}>报道量</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => {this.switchTab("allNeg")}} style={[stylesm.reportTitleW,this.state.allNeg?styles.borderStyle:null]}>
              <Text style={[stylesm.reportTitleN, styles.reportTitleLC]}>{Common.toTransformation(data.negTotalReportCount).value}<Text style={stylesm.unitF}>{Common.toTransformation(data.negTotalReportCount).unit}</Text></Text>
              <View style={stylesm.reportTitleL}>
                <Text style={styles.reportTitleText}>总负面</Text>
                <Text style={styles.reportTitleText}>报道量</Text>
              </View>
            </TouchableOpacity>
          </View>
          
          <View style={{flex: 1}}>
            {
            (this.state.loading?
              <Loading />:
              (this.state.success?
                <View style={{backgroundColor: '#fff'}}>
                  <AnalysisList posNegData={this.state.list} isPosNeg={this.state.posNeg} {...this.props}/>
                </View>
                :
                <LoadError reload={() => this.switchTab(this.state.currentStatus)} reason={this.state.errorMessage}/>))
          }
          </View>
        </View>
        </View>
      );
    }else{
      return null;
    }
  }
}

const styles = StyleSheet.create({
  toolbarV: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  toolbarT: {
    color: '#ffffff',
    fontWeight: 'bold',
    fontSize: 20
  },
  analysis: {
    flex: 1,
    backgroundColor: '#f6f6f6',
  },
  reportTitleLC: {
    color: '#569252'
  },
  reportTitleText: {
    fontSize: 6,
    color: '#000',
  },
  borderStyle: {
    borderBottomColor: '#ff4546', borderBottomWidth: 2/PixelRatio.get(),
  }
});
